<template>
	<view class="app">
		<z-paging
			show-refresher-update-time
			show-refresher-when-reload
			v-model="data.list"
			ref="paging"
			@query="getList"
		>
			<view class="list_head" slot="top">
				<u-tabs
					active-color="#3AB54A"
					duration="0.2"
					:is-scroll="false"
					:list="subsection1.list"
					:current="subsection1.current"
					@change="sectionChange1"
				></u-tabs>
			</view>
			<block v-for="item in data.list" :key="item._id">
				<vk-mall-user-coupon :coupon="item" mode="list"></vk-mall-user-coupon>
			</block>
		</z-paging>
	</view>
</template>

<script>
var vk = uni.vk // vk依赖

export default {
	data() {
		return {
			// 获取list数据的云函数请求路径
			url: "client/user.getCouponList",
			// init请求返回的数据
			data: {
				list: [],
				total: "-",
				hasMore: true // 是否还有下一页数据
			},
			// 列表查询请求数据
			queryForm1: {
				// 分页数据
				pagination: {
					pageIndex: 1, //当前页码
					pageSize: 10 //每页显示数量
				},
				// 查询表单数据源，可在此设置默认值
				formData: {
					_add_time: [],
					status: 0
				},
				// 查询匹配规则 fieldName:指定数据库字段名,不填默认等于key
				columns: [
					{ key: "_add_time", mode: "[]" },
					{ key: "status", mode: "=" }
				],
				// 排序规则
				sortRule: [
					{ name: "_add_time", type: "desc" } // desc降序 asc升序
				]
			},
			// 页面状态
			state: {
				loadmore: "loading" // loadmore的显示状态
			},
			// 头部状态选择
			subsection1: {
				key: "status", // 查询字段名
				current: 0, // 当前选中的索引
				list: [
					{ name: "未使用", value: 0 },
					{ name: "已使用", value: 1 },
					{ name: "已过期", value: 2 }
				]
			}
		}
	},
	methods: {
		// 搜索查询
		search(e) {
			this.queryForm1.pagination.pageIndex = 1
			this.data.pageKey = true
			this.$refs.paging.reload()
		},
		// 获取list数据
		getList(pageIndex, pageSize) {
			let that = this
			that.$set(that.queryForm1.pagination, "pageIndex", pageIndex)
			that.$set(that.queryForm1.pagination, "pageSize", pageSize)
			vk.pubfn.getListData2({
				that: that,
				url: that.url,
				success: res => {
					this.$refs.paging.complete(res.rows)
				}
			})
		},
		// 顶部选项改变事件
		sectionChange1(index, search = true) {
			let that = this
			if (index < 0) {
				return false
			}
			that.subsection1.current = index
			let key = that.subsection1.key
			let value = that.subsection1.list[index].value
			that.$set(that.queryForm1.formData, key, value)
			that.data.list = []
			that.data.total = "-"
			// 搜索
			if (search) that.search()
		}
	}
}
</script>

<style lang="scss" scoped>
.app {
	background-color: var(--bgcolor);
	height: 100vh;
	/* #ifdef H5 */
	height: calc(100vh - 88rpx);
	/* #endif */
}

.list_head {
	border-top: 1rpx solid #f5f5f5;
	box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.06);
}
</style>
